<template>
    <div class="personal-center">
        <div class="header">
            <img class="avatar" :src="avatarUrl" alt="Avatar">
            <h1 class="username">{{ username }}</h1>
            <button class="edit-button" @click="editProfile">编辑个人信息</button>
        </div>
        <div class="info">
            <h2 class="title">个人信息</h2>
            <div class="details">
                <div class="detail-item">
                    <label class="label">姓名：</label>
                    <span class="value">{{ name }}</span>
                </div>
                <div class="detail-item">
                    <label class="label">年龄：</label>
                    <span class="value">{{ age }}</span>
                </div>
                <div class="detail-item">
                    <label class="label">性别：</label>
                    <span class="value">{{ gender }}</span>
                </div>
                <div class="detail-item">
                    <label class="label">邮箱：</label>
                    <span class="value">{{ email }}</span>
                </div>
                <div class="detail-item">
                    <label class="label">地址：</label>
                    <span class="value">{{ address }}</span>
                </div>
            </div>
        </div>
        <div class="role">
            <h2 class="title">角色</h2>
            <div class="roles-list">
                <div class="role-item" v-for="role in roles" :key="role.id">
                    <span class="role-name">{{ role.name }}</span>
                    <span class="role-description">{{ role.description }}</span>
                </div>
            </div>
        </div>
        <div class="orders">
            <h2 class="title">订单列表</h2>
            <ul class="order-list">
                <li v-for="order in orders" :key="order.id" class="order-item">
                    <div class="order-info">
                        <span class="order-id">{{ order.id }}</span>
                        <span class="order-date">{{ order.date }}</span>
                        <span class="order-amount">{{ order.amount }}</span>
                    </div>
                    <div class="order-status">{{ order.status }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>
  
<script scoped>
export default {
    data() {
        return {
            avatarUrl: 'https://example.com/avatar.jpg',
            username: 'John Doe',
            name: 'John Doe',
            age: 30,
            gender: 'Male',
            email: 'john.doe@example.com',
            address: '123 Street, City, Country',
            roles: [
                { id: 1, name: '管理员', description: '拥有最高权限' },
                { id: 2, name: '编辑员', description: '负责编辑内容' },
                { id: 3, name: '普通用户', description: '具备普通权限' }
            ],
            orders: [
                { id: 1, date: '2023-05-01', amount: '$100', status: '已完成' },
                { id: 2, date: '2023-05-05', amount: '$50', status: '待付款' },
                {
                    id: 3, date: '2023-05-10', amount:
                        '$80', status: '已取消'
                }
            ]
        };
    },
    methods: {
        editProfile() {
            // 处理编辑个人信息的逻辑
        }
    }
};
</script>

<style>
.personal-center {
    max-width:1300px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(to bottom right, #4c67ff, #5635df);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: white;
    font-family: Arial, sans-serif;
}

.header {
    text-align: center;
    margin-bottom: 20px;
}

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.username {
    margin-top: 10px;
    font-size: 24px;
}

.edit-button {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.edit-button:hover {
    color: #f5f5f5;
}

.info {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
}

.title,.label {
    color: #5635df;
    font-size: 20px;
    margin-bottom: 10px;
}

.details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.detail-item {
    display: flex;
    align-items: center;
}

.label {
    font-weight: bold;
    margin-right: 10px;
}

.value {
    color: #333;
}

.role {
    margin-top: 30px;
}

.roles-list {
    display: flex;
    flex-wrap: wrap;
}

.role-item {
    flex: 0 0 calc(50% - 10px);
    background-color: white;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.role-name {
    font-weight: bold;
}

.role-description {
    color: #333;
}

.orders {
    margin-top: 30px;
}

.order-list {
    list-style: none;
    padding: 0;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.order-info {
    display: flex;
    align-items: center;
}

.order-id {
    font-weight: bold;
    margin-right: 10px;
}

.order-status {
    color: #5635df;
    font-weight: bold;
}
.role .title,.orders .title {
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
}



.role-name {
  font-weight: bold;
  color: #fff;
}


.order-id {
  font-weight: bold;
  color: #fff;
}

.order-status {
  color: #fff;
  font-weight: bold;
}

</style>
  